import React, { FC, useState, useEffect } from 'react'
import { Input } from 'antd'
const { Search } = Input
import { useNavigate, useLocation, useSearchParams } from 'react-router-dom'
import type { ChangeEvent } from 'react'
import { LIST_SEARCH_PARAMS_KEyWORDS } from '../../constant/index'
const ListSearch: FC = () => {
  const nav = useNavigate()
  const { pathname } = useLocation()
  const [searchParams] = useSearchParams()
  const handleSearch = (value: string) => {
    console.log(value)
    nav({
      pathname,
      search: `${LIST_SEARCH_PARAMS_KEyWORDS}=${value}`,
    })
    return
  }
  useEffect(() => {
    const value = searchParams.get(LIST_SEARCH_PARAMS_KEyWORDS) || ''
    setValue(value)
  }, [searchParams])
  const [value, setValue] = useState('')
  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    console.log(event.target.value)
    setValue(event.target.value)
  }
  return (
    <div>
      <Search
        placeholder="输入关键字"
        allowClear
        onSearch={handleSearch}
        style={{ width: 260 }}
        value={value}
        onChange={handleChange}
      />
    </div>
  )
}
export default ListSearch
